<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" >
    <link rel="stylesheet" th:href="@{/layui/dist/css/view.css}"/>
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}"  media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <!--<link rel="icon" href="/favicon.ico">-->
    <title>管理权限后台</title>
    <script>
        function disable() {
            var id = document.getElementsByName
        }
    </script>

</head>

<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-page-header">
            <div class="pagewrap">
                <div class="pagewrap" style="height: 80px;">
                    <div style="margin-left: 50px;margin-top: 30px;">
                        <font size="6">管理员列表</font>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="form-box">
                        <form th:action="@{/adminManage}" method="post">
                        <div class="layui-form layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-mid">管理员编号:</div>
                                <div class="layui-input-inline" style="width: 120px;">
                                    <input type="text" autocomplete="off" class="layui-input" name="adminNo">
                                </div>
                                <div class="layui-form-mid">管理员名称:</div>
                                <div class="layui-input-inline" style="width: 120px;">
                                  <input type="text" autocomplete="off" class="layui-input" name="adminName">
                                </div>
                                <!--<div class="layui-form-mid">状态:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                  <input type="text" autocomplete="off" class="layui-input">
                                </div>-->
                                <div class="layui-form-mid">状态:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <select name="state">
                                        <option  value=""></option>
                                        <option th:selected="${state == '1'}" value="1">启用</option>
                                        <option th:selected="${state == '2'}" value="2">禁用</option>
                                    </select>     
                                </div>
                                <button class="layui-btn layui-btn-blue">查询</button>
                                <!--<button class="layui-btn layui-btn-primary">重置</button>-->
                            </div>
                        </div>
                        </form>
                        <button class="layui-btn layui-btn-blue" onclick="addAdmin()">
                            <i class="layui-icon">&#xe654;</i>新增</button>
                        <!--<form action="" method="post" name="adminOperation">-->
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th hidden="hidden">id</th>
                                <th>管理员编号</th>
                                <th>管理员姓名</th>
                                <th>管理员权限</th>
                                <th>状态</th>
                                <th>联系方式</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="sysUser:${adminList}">
                                <td hidden="hidden" th:text="${sysUser.id}" th:name="id">1</td>
                                <td th:text="${sysUser.adminNo}">1001</td>
                                <td th:text="${sysUser.adminName}">Tom</td>

                                <td th:each="role:${sysUser.roles}" th:text="${role.name}">超管</td>
                                <td th:text="${sysUser.state == '1' ? '启用':'禁用'}">启用</td>
                                <td th:text="${sysUser.mobile}">12345678998</td>
                                <td>
                                    <button class="layui-btn layui-btn-sm" type="button" th:onclick="'modifyAdmin(' + ${sysUser.id} + ')'">编辑</button>
                                    <a class="layui-btn layui-btn-sm"style="background-color:orange" th:href="@{/enable(id=${sysUser.id})}">启用</a>
                                    <a class="layui-btn layui-btn-sm" style="background-color: red" th:href="@{/disable(id=${sysUser.id})}">禁用</a>
                                    <!--<button class="layui-btn layui-btn-sm layui-btn-danger" th:onclick="">启用</button>-->
                                    <!--<button class="layui-btn layui-btn-sm layui-btn-danger">禁用</button>-->
                                </td>
                            </tr>
                            </tbody>
                        </table>
                            <!--分页导航-->
                            <div class="pagination center pagination-large pt-20" style="margin-left: 30%">
                                <div class="row text-center">
                                    <div class="col-md-12">
                                        <ul class="pagination">
                                            <li><a th:class="${currentPage eq 1 ? 'btn disabled' : '' }" href="javascript:;" th:href="@{/adminManage(page=1,adminNo=${adminNo},adminName=${adminName},state=${state})}">首页</a></li>
                                            <li><a th:class="${currentPage eq 1 ? 'btn disabled' : '' }" href="javascript:void(0);" th:href="@{/adminManage(page=${currentPage}-1,adminNo=${adminNo},adminName=${adminName},state=${state})}">&laquo;</a></li>

                                            <li th:class="${page eq currentPage} ? 'active' : ''" th:each="page:${#numbers.sequence(1,totalPage)}">
                                                <a href="javascript:void(0);" th:href="@{/adminManage(page=${page},adminNo=${adminNo},adminName=${adminName},state=${state})}" th:text="${page}">1</a>
                                            </li>

                                            <li><a th:class="${currentPage eq totalPage ? 'btn disabled' : '' }" href="javascript:void(0);" th:href="@{/adminManage(page=${currentPage}+1,adminNo=${adminNo},adminName=${adminName},state=${state})}">&raquo;</a></li>
                                            <li><a th:class="${currentPage eq totalPage ? 'btn disabled' : '' }" href="#" th:href="@{/adminManage(page=${totalPage},adminNo=${adminNo},adminName=${adminName},state=${state})}" style="border: 1px solid #ddd;">尾页</a></li>
                                            <li><a style="border: 0px;margin-left: 0px;">当前页<span th:text="${currentPage}"></span>/<span th:text="${totalPage}"></span>总页</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        <!--</form>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/layui/dist/layui.all.js}" charset="utf-8"></script>
    <script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="enable">启用</a>
        <a class="layui-btn layui-btn-xs" lay-event="disable" style="background-color: #ff0000;">禁用</a>
    </script>
    <script>
        function modifyAdmin(id){
            layer.open({
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type:2,
            title:"修改信息",
            area: ['80%','80%','left:126px'],
            content:'/code/jumpToModifyAdmin?id=' + id,

                end: function () {
                    window.location.reload();
                }

            });

        }

        function addAdmin(){
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type:2,
                title:"添加管理员",
                area: ['80%','80%','left:126px'],
                content:'/code/jumpToAddAdmin',

                end: function () {
                    window.location.reload();
                }

            });

        }
    </script>

</body>
</html>